<style>
.page-pages {
/**/
}
</style>

<template>
<div class="page-pages">
<!--{{testObj.urlMap}}-->
 <z-space vertical>
<!--   <el-button @click="changeConfig">改变tongji配置 组件会即时修改</el-button>-->
<!--   <div>{{testObj.panelOption}}</div>-->
   <z-form-template
       :def="search.def"
       ref="searchForm"
@model-change="onModelChange"
       @ready="onFormReady"
   >
     <template #after="scope">
<!--       <div v-if="scope.curFormCtx">-->
<!--         <el-button type="primary"-->
<!--                    @click="handleFormSubmit(scope.curFormCtx.getCurForm())">提交</el-button>-->
<!--       </div>-->
     </template>
   </z-form-template>

   <z-page-design >
     <z-crud-page :obj="testObj" >
       <template #list_item_content="scope">
         <div style="height: 120px;">{{scope.getColumnByKey('sourceTable1')}}</div>
       </template>
     </z-crud-page>
   </z-page-design>
 </z-space>

<!--  <h3>z-page-design</h3>-->
<!--  <p>通过detect 事件通找到点击的元素</p>-->
<!--  <RemoteFileViewer file="src/zpkgs/components/z-pages/ZPageDesign.vue"></RemoteFileViewer>-->

  <h3>tree接口格式</h3>
  <RemoteApiViewer url="/api/demo1/tree"></RemoteApiViewer>

  <h3>统计接口格式</h3>
  <RemoteApiViewer url="/api/demo1/tongji"></RemoteApiViewer>

  <h3>当前文件</h3>
  <RemoteFileViewer file="example/views/pages/base.vue"></RemoteFileViewer>

  <h3>def</h3>
  <RemoteFileViewer file="example/views/pages/test.jsx"></RemoteFileViewer>

<!--  <p>CurdHelper</p>-->
<!--  <RemoteFileViewer file="src/zpkgs/ext/CurdHelper.js"></RemoteFileViewer>-->
</div>
</template>
<script>
import {EditCom, DetailCom} from "@example/views/pages/test.jsx";
import VueCodeMirror from "@example/components/VueCodeMirror";
import RemoteFileViewer from "@example/plugins/example/components/RemoteFileViewer";
import ZPageDesign from "@/zpkgs/components/z-pages/ZPageDesign";
import RemoteApiViewer from "@example/plugins/example/components/RemoteApiViewer";

export default {
  components: {RemoteApiViewer, ZPageDesign, RemoteFileViewer, VueCodeMirror},
  data() {
    return {
      testObj: {
        treeOption: {
          url: '/api/demo1/tree',
          rightMenu: [
            {
              name: '复制',
              command: 'copy'
            },
            {
              name: '转发',
              command: 'send'
            }
          ],
          // treeIdKey: 'id',
          searchIdKey: 'tree_id'
        },
        panelOption: {
          url: '/api/demo1/tongji',
        },
        tableOption: {
          defaultUrl: '/api/list',
          urlMap: {
            batchDel: '/api/del'
          },
        },
        EditCom,
        DetailCom
      },
      search: {
        def: {
          ui: {
          },
          properties: {
            tableOption: {
              type: 'object',
              properties: {
                defaultUrl: {
                  type: 'string',
                  ui: {
                    widget: 'CusInput',
                    label: '表格API地址',
                    widgetConfig: {
                    },
                  },
                  rules: [],
                },
              }
            },
            // panelOption: {
            //   type: 'object',
            //   properties: {
            //     url: {
            //       type: 'string',
            //       ui: {
            //         widget: 'CusSelect',
            //         label: 'URL',
            //         widgetConfig: {
            //           options: [
            //             {
            //               label:'/api/demo1/tongji',
            //               value:'/api/demo1/tongji',
            //             },
            //             {
            //               label:'/api/demo1/tongji_2',
            //               value:'/api/demo1/tongji_2',
            //             }
            //           ]
            //         },
            //         watch: [
            //           'maxText',
            //         ],
            //       },
            //       rules: [],
            //     },
            //   }
            // }
          }
        }
      }
    }
  },
  methods: {
    changeConfig() {
      let arr = [
          '/api/demo1/tongji',
          '/api/demo1/tongji_2'
      ]
      this.testObj.panelOption.url =
          this.testObj.panelOption.url === arr[0] ? arr[1] : arr[0]
    },
    onModelChange(e) {
      console.log('onModelChange', e)
      if (e.pathArr.includes('tableOption')) {
        this.testObj.tableOption.defaultUrl = e.model.tableOption.defaultUrl
      }
    },
    onFormReady({form}) {
      // console.log(form)
      form.importData({
        panelOption: {
          url: '/api/demo1/tongji'
        }
      })
    }
    // handleFormSubmit(form) {
    //   console.log('handleFormSubmit', form)
    // }
  }
}
</script>
